<template>
	<!-- 网格组件容器 -->
	<view class="JGrid">
		<!-- 使用uView的网格组件，5列布局，无边框 -->
		<uv-grid :col="5" :border="false">
			<!-- 遍历网格项列表 -->
			<uv-grid-item v-for="(item, index) in list" :key="index">
				<!-- 单个网格项容器 -->
				<view class="grid-item">
					<!-- 图标容器 -->
					<view class="icon-wrap">
						<image :src="item.icon" mode=""></image>
					</view>
					<!-- 文本标签 -->
					<text class="grid-text">{{ item.name }}</text>
				</view>
			</uv-grid-item>
		</uv-grid>
	</view>
</template>

<script>
/**
 * 网格组件
 * 用于展示图标和文本的网格布局
 * 支持5列布局，常用于商品分类、功能入口等场景
 */
export default {
	props: {
		// 网格数据列表
		// 每个item应包含: { icon: '图标路径', name: '显示名称' }
		list: {
			type: Array,
			default: () => []
		}
	},
	name: 'JGrid',
	data() {
		return {};
	}
};
</script>

<style lang="less">
/* 网格组件样式 */
.JGrid {
	/* 单个网格项样式 */
	.grid-item {
		width: 100%;
		display: flex;
		flex-direction: column; // 垂直布局
		align-items: center; // 水平居中
		justify-content: center; // 垂直居中
		
		/* 网格项文本样式 */
		.grid-text {
			font-size: 14px;
			color: #909399;
			padding: 10rpx 0 20rpx 0rpx;
			/* #ifndef APP-PLUS */
			box-sizing: border-box;
			/* #endif */
		}

		/* 图标容器样式 */
		.icon-wrap {
			display: flex;
			align-items: center;
			justify-content: center;

			/* 图标样式 */
			image {
				width: 90rpx;
				height: 90rpx;
				background: #f3f4f6; // 默认背景色
			}
		}

		/* 网格文本样式（覆盖上面的样式） */
		.grid-text {
			font-size: 24rpx;
			text-align: center;
			color: #333;
		}
	}
}
</style>
